<template>
  <el-row type="flex" justify="center" style="text-align: left">
    <el-card style="border-radius: 15px;width: 600px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input
              type="text"
              placeholder="请输入内容"
              v-model="form.details"
              maxlength="10"
              show-word-limit
          >
          </el-input>
        </el-form-item>

        <el-form-item label="文案">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.copyWriting">
          </el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-upload
              action="http://10.1.188.10:20000/upload"
              name="picFile"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="form.dialogVisible">
            <img width="100%" :src="form.url" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">发表</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </el-row>
</template>

<script>
import {getToken} from "@/utils/token";

export default {
  name: "PostedView",
  data() {
    return {
      form: {
        details: '',
        copyWriting: '',
        url: '',
        dialogVisible: false
      },
      categories: [],
      value: '',
    }
  },
  mounted() {
    //发请求得到所有分类信息
    this.$refs.form.validate(valid => {
      if (valid){
        const url = 'http://10.1.188.10:20002/category/list'
        //  getToken()
        //  console.log(getToken())
        //  console.log('ooifsdfdfffffffffffff')
        this.axios.post(url).then(response => {
          console.log(response);
          this.categories = response.data.data;
        }).catch(function (error){
          console.log(error)
        })
      }else {
        console.log('error submit!!')
        return false
      }
    })
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.axios.get('http://10.1.188.10:20000/remove?name='+file.response).then(function (response){})
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response,file,fileList){
      this.form.url=response
    },
    onSubmit(){
      // if (this.form.url == ''){
      //   alert("请至少添加一张图片!")
      //   return
      // }
      this.$refs.form.validate(valid => {
        if (valid){
          const Url = 'http://10.1.188.10:20001/article/articles/add'
          const data = {
            details: this.form.details,
            copyWriting: this.form.copyWriting,
            categoryId: this.value,
            url: this.form.url
          }
          console.log(data)
          this.axios.post(Url,data).then(response => {
            console.log('---------------------')
            let json = response.data
            let state = json.state
            if (state == 20000) {
              console.log('发表成功!')
              console.log(json.data)
              this.$router.push({path: this.redirect || '/'}).catch(() => {})
              this.$message({
                message: '发表成功!',
                type: 'success'
              })
            }else{
              console.log(json.message)
              this.$message.error(json.message)
            }
          }).catch(function (error){
            console.log(error)
          })
        }else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
